<template>
	<div class="main_content">
		<div style="margin-top: 0.875rem;">平台刷题数</div>
		<div class="main">
			<div style="margin: 0.625rem;">刷题数:87题</div>
			<div id="myChart1" :style="{width: '150px', height: '150px'}" ref="myChart1" class="pid"></div>
			<div id="myChart1" :style="{width: '150px', height: '150px'}" ref="myChart11" class="pid1"></div>
		</div>
		<div style="margin-top: 0.875rem;">平台刷题数</div>
		<div class="main">
			<div style="margin: 0.625rem;">刷题数:87题</div>
			<div id="myChart2" :style="{width: '150px', height: '150px'}" ref="myChart2" class="pid"></div>
			<div id="myChart1" :style="{width: '150px', height: '150px'}" ref="myChart22" class="pid1"></div>
		</div>
		<div style="margin-top: 0.875rem;">平台刷题数</div>
		<div class="main">
			<div style="margin: 0.625rem;">刷题数:87题</div>
			<div id="myChart3" :style="{width: '150px', height: '150px'}" ref="myChart3" class="pid"></div>
			<div id="myChart1" :style="{width: '150px', height: '150px'}" ref="myChart33" class="pid1"></div>
		</div>
	</div>
</template>

<script>
	// import * as echarts from 'echarts'
	export default {
		data() {
			return {

			}
		},
		mounted() {
			this.drawLine();
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart1 = this.$echarts.init(this.$refs.myChart1)
				let myChart2 = this.$echarts.init(this.$refs.myChart2)
				let myChart3 = this.$echarts.init(this.$refs.myChart3)
				let myChart11 = this.$echarts.init(this.$refs.myChart11)
				let myChart22 = this.$echarts.init(this.$refs.myChart22)
				let myChart33 = this.$echarts.init(this.$refs.myChart33)
				// 指定图表的配置项和数据
				var option = {
					//标题
					title: {
						text: '这是个标题',
						x: 'left', //标题位置
						textStyle: { //标题内容的样式
							color: '#000',
							fontStyle: 'normal',
							fontWeight: 100,
							fontSize: 12 //主题文字字体大小，默认为18px
						},
					},
					// stillShowZeroSum: true,
					//鼠标划过时饼状图上显示的数据
					tooltip: {
						trigger: 'item',
						formatter: '{a}<br/>{b}:{c} ({d}%)'
					},
					//图例
					legend: { //图例  标注各种颜色代表的模块
						// orient: 'vertical',//图例的显示方式  默认横向显示
						bottom: 10, //控制图例出现的距离  默认左上角
						left: 'center', //控制图例的位置
						// itemWidth: 16,//图例颜色块的宽度和高度
						// itemHeight: 12,
						textStyle: { //图例中文字的样式
							color: '#000',
							fontSize: 8
						},
						data: ['未领取', '处理中', '已完成'] //图例上显示的饼图各模块上的名字
					},
					//饼图中各模块的颜色
					color: ['#32dadd', '#b6a2de', '#5ab1ef'],
					// 饼图数据
					series: {
						// name: 'bug分布',
						type: 'pie', //echarts图的类型   pie代表饼图
						radius: '70%', //饼图中饼状部分的大小所占整个父元素的百分比
						center: ['50%', '50%'], //整个饼图在整个父元素中的位置
						// data:''               //饼图数据
						data: [ //每个模块的名字和值
							{
								name: '未领取',
								value: 10
							},
							{
								name: '处理中',
								value: 30
							},
							{
								name: '已完成',
								value: 50
							}
						],
						itemStyle: {
							normal: {
								label: {
									show: true, //饼图上是否出现标注文字 标注各模块代表什么  默认是true
									// position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
								},
								labelLine: {
									show: true //官网demo里外部标注上的小细线的显示隐藏    默认显示
								}
							}
						},
					}

				}
				// 使用刚指定的配置项和数据显示图表。
				myChart1.setOption(option)
				myChart2.setOption(option)
				myChart3.setOption(option)
				myChart11.setOption(option)
				myChart22.setOption(option)
				myChart33.setOption(option)
			}


		}

	}
</script>

<style scoped="scoped">
	.main_content {
		margin-left: 10px;
		margin-right: 2.5rem;
		height: 100vh;
		background-color: #f0fafe;
	}

	.main {
		width: 100%;
		height: 13.125rem;
		margin-right: 0.625rem;
		background-color: white;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
		/* margin-top: 1.875rem; */
	}

	.pid1 {
		margin-left: 29.75rem;


	}
	.pid {
		margin-left:10.75rem;
	
	
	}
</style>
